<template>
	<view >
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">打卡吧 呆宝</block>
		</cu-custom>
		<!-- #endif -->
		<view class="text-area">
			<view class="margin bg-img">
				<view class="notice">
					<u-notice-bar mode="horizontal" :list="list" :border-radius="20" type="primary"></u-notice-bar>
				</view>
				<view class="daka shadow-blur flex" :style="{background:isRecord?'#7bb4ff':'#2979ff'}">
					<button v-if="!vuex_user.userId"  @click="wxLogin" withCredentials="true" style="width: 95%; background: none;border: solid 0rpx !important;">
						<text class="daka-text justify-center text-white" v-if="!isRecord">登录</text>
						<text class="daka-text justify-center text-white" v-else>已打卡</text>
					</button>
					<button v-else @click="openDaka()" style="width: 95%; background: none;border: solid 0rpx !important;">
						<text class="daka-text justify-center text-white" v-if="!isRecord">打卡</text>
						<text class="daka-text justify-center text-white" v-else>已打卡</text>
					</button>
				</view>
				<view class="daka-sum">
					<view class="text-white">
						<text class="daka-text justify-center  padding-lr text-sm">累计打卡</text>
						<text class="text-xl padding-sm">
							{{clockCount.sumClock||0}}
						</text>天
					</view>
					<view class="text-white margin-tb-sm">
						<text class="daka-text justify-center text-white padding-lr text-sm">连续打卡</text>
						<text class="text-xl padding-sm">{{clockCount.continuousClock||0}}</text>天
					</view>
					<view class="text-white margin-tb-sm">
						<text class="daka-text justify-center text-white padding-lr text-sm">循环打卡</text>
						<text class="text-xl padding-sm">{{clockCount.cycleNum||0}}</text>天
					</view>
				</view>
				<u-image width="100%" height="82vh" src="https://minio.jy520.fun/southwind/bg2.jpeg"></u-image>
			</view>
			<u-popup v-model="isDakaModel" mode="center" :closeable="false"  width="80%" border-radius="30">
				<view class="padding-lr">
					<template>
						<view class="padding-tb">
							<u-form :model="form" ref="rules" >
								<u-form-item label="留言">
									<u-input v-model="form.note" prop="note"/>
								</u-form-item>
								<u-form-item label="截图">
									<u-upload ref="uUpload" @on-success="uploadSuccess" :action="uploadUrl" :header="uploadHeader"
									@on-progress="uploadPropress"	:auto-upload="true" :max-size="5 * 1024 * 1024" max-count="1"></u-upload>
								</u-form-item>
							</u-form>
						</view>
						<view class="padding-tb">
							<u-button  @click="submit">提交</u-button>
						</view>
					</template>
					
				</view>
			</u-popup>
		</view>
		<u-gap height="40"></u-gap>
		<view class="padding desc">
			<view class="padding-tb">
				<u-section title="循环打卡" :right="false" color="#2979ff" font-size="34"></u-section>
				<view class="padding-top-sm">
					<template>
						<u-grid :col="3">
							<u-grid-item v-for="(cycle,index) in listCycleClockFirst"  @click="receivePrice(cycle)" >
								<u-icon :name="cycle.img" :size="46" :color="cycle.status==3?'#646464':cycle.status==0?'#1cbbb4':'#ccc'"></u-icon>
								<view class="grid-text">{{cycle.name+" "}}{{cycle.num+'天'}}</view>
							</u-grid-item>
							
							<u-grid-item v-if="listCycleClockFirst.length>0">
								<u-icon name="order" :size="46" color="#fff"></u-icon>
								<view class="grid-text text-white">爱你呀呆宝</view>
							</u-grid-item>
							
							<u-grid-item v-for="(cycle,index) in listCycleClockEnd" @click="receivePrice(cycle)" >
								<u-icon :name="cycle.img" :size="46" :color="cycle.status==3?'#646464':cycle.status==0?'#1cbbb4':'#ccc'"></u-icon>
								<view class="grid-text">{{cycle.name+" "}}{{cycle.num+'天'}}</view>
							</u-grid-item>
						</u-grid>
					</template>
				</view>
			</view>
			<view class="padding-tb">
				<u-section title="连续打卡" :right="false" color="#2979ff" font-size="34"></u-section>
				<view class="padding">
					<template>
						<u-time-line>
							<u-time-line-item nodeTop="10" v-for="(continuou,index) in listContinuousClock" >
								
								<template v-slot:node>
									<view class="u-node" :style="{background:continuou.status==3?'#646464':continuou.status==0?'#1cbbb4':'#ccc'}">
										<u-icon :name="continuou.img" color="#fff" :size="24"></u-icon>
									</view>
								</template>
								<template v-slot:content>
									<view style="width: 100%;">
										<view class="u-order-title">连续打卡 {{continuou.num}} 天</view>
										<view class="u-order-desc " style="width: 100%;"><text class="text-black">[{{continuou.name}}]</text> {{" "+continuou.description}}</view>
										<view style="width: 100%;display: flex;">
											<button class="cu-btn   u-flex-1" style="width: 100%;" :class="continuou.status==3?'line-grey':continuou.status==0?'bg-cyan':'lines-gray'" @click="receivePrice(listContinuousClock[index])">{{continuou.status==1?'已':''}}领奖</button>
										</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</template>
				</view>
			</view>
			
			<view >
				<u-section title="累计打卡" :right="false" color="#2979ff" font-size="34"></u-section>
				<view class="padding-tb">
					<u-cell-group>
						<u-cell-item :icon-style="{color:sum.status==3?'#646464':sum.status==0?'#1cbbb4':'#ccc',paddingRight:'20rpx'}"
							v-for="sum in listSumClock" :label="sum.description"  @click="receivePrice(sum)"  :icon="sum.img" :title="sum.name" :value="sum.num +' 天'" ></u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import globalConfig from '@/common/config.js'
	export default {
		data() {
			return {
				form:{
					note:'',
					img:''
				},
				rules:{
					note:[{message: '激励一下自己吧'}]
				},
				listSumClock:[],
				listContinuousClock:[],
				listCycleClock:[],
				listCycleClockFirst:[],
				listCycleClockEnd:[],
				clockCount:{},
				isDakaModel: false,
				isRecord : false,
				list:[	'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'],
				uploadUrl: globalConfig.url+'/file/upload',
				uploadHeader:{
					Authorization:""
				}
			}
		},
		onLoad() {
			this.hasRecordToday();
			this.engineCountClock();
			this.listNotice();
			this.engineList();
			this.share();
		},
		onShow() {
			this.uploadHeader.Authorization = this.vuex_token;
		},
		methods: {
			receivePrice(engine){
				this.$u.api.receivePrice(engine).then(res => {
					if(res.success){ 
						uni.showToast({
							title: '成功领奖啦，记得去领奖记录中查收',
							duration: 2000,
							icon: 'none'
						});
						this.engineList();
					}
				});
			},
			engineList(){
				this.$u.api.engineList({engineType:1}).then(res => {
					this.listSumClock = res.data;
				});
				this.$u.api.engineList({engineType:2}).then(res => {
					this.listCycleClockFirst = [];
					this.listCycleClockEnd = [];
					this.listCycleClockFirst.push(res.data[0])
					this.listCycleClockFirst.push(res.data[1])
					this.listCycleClockFirst.push(res.data[2])
					this.listCycleClockFirst.push(res.data[7])
					this.listCycleClockEnd.push(res.data[3])
					this.listCycleClockEnd.push(res.data[6])
					this.listCycleClockEnd.push(res.data[5])
					this.listCycleClockEnd.push(res.data[4])
				});
				this.$u.api.engineList({engineType:3}).then(res => {
					this.listContinuousClock = res.data;
				});
				
			},
			listNotice(){
				this.$u.api.listNotice().then(res => {
					if(res.data){
						this.list = res.data;
					}
				});
			},
			engineCountClock(){
				this.$u.api.engineCountClock().then(res => {
					this.clockCount = res.data;
				});
			},
			hasRecordToday(){
				this.$u.api.hasRecordToday().then(res => {
					this.isRecord = res.data;
				});
			},
			submit(){
				this.$u.api.recordAdd(this.form).then(res => {
					uni.showToast({ icon: 'none',duration: 1500,position: 'bottom',title: '打卡成功，辛苦啦'});
					this.isDakaModel = false;
					this.isRecord = true;
					this.engineCountClock();
					this.engineList();
				});
			},
			uploadSuccess(data, index, lists, name){
				this.form.img = data.data.img;
			},
			uploadPropress(res, index, lists, name){
				console.log(res);
			},
			openDaka(){
				if(this.isRecord){
					uni.showToast({ icon: 'none',duration: 1500,position: 'bottom',title: '今天已经打卡啦'});
					return
				}
				this.isDakaModel = true;
			},
			share(){
				uni.showShareMenu({
					title:'打卡吧呆宝'
				})
			},
			wxLogin() {
				let _this = this;
				wx.getUserProfile({
				    desc: '用于完善用户资料',
					success: (res) => {
						uni.showLoading({
							title: '登录中...'
						});
						_this.getWechatOpenId(res.userInfo);
				        console.log(res);
					},
					fail(res) {
						uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '登录失败：' + res.errMsg });
						console.log(res);
					}
				})
				
			},
			getWechatOpenId(userInfo){
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						//从服务器上获取AppId screat //根据code 去微信服务器获取 openid
						_this.$u.api.getWechatOpenId({ code: loginRes.code }).then(res => {
							if (!res.data) {
								uni.hideLoading();
								uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '登录失败' });
								return;
							}
							let authUser = {
								uuid: res.data.openid,
								userName: userInfo.nickName,
								nickName: userInfo.nickName,
								avatar: userInfo.avatarUrl,
								userType: 1,
								oauthType: 'wechat'
							};
							_this.$u.api.wechatLogin(authUser).then(res => {
								let user = res.data.userInfo;
								_this.$u.vuex('vuex_user.userId', user.userId);
								_this.$u.vuex('vuex_user.username', user.userName);
								_this.$u.vuex('vuex_user.avatar', user.avatar);
								_this.$u.vuex('vuex_user.userType', user.userType);
								_this.$u.vuex('vuex_user.roleId', user.roleId);
								_this.$u.vuex('vuex_token', res.data.token);
								_this.hasRecordToday();
								_this.engineCountClock();
								_this.listNotice();
								_this.engineList();
							});
							uni.hideLoading();
							uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '登录成功' });
						});
					},
					fail: function() {
						uni.hideLoading();
						uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '登录失败' });
					}
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>
.bg-img
	border-radius 30rpx
	overflow hidden
	position relative
	.notice
		position absolute
		top 20rpx
		left 0rpx
		width 100%
		z-index 200
		padding 20rpx
	.daka
		width 280rpx
		height 280rpx
		border-radius 50%
		position absolute
		top 30%
		left 50%
		transform translateX(-50%)
		background #2979ff
		z-index 200
		.daka-text
			text-align center
			line-height 280rpx
			width 100%
			font-size 48rpx
			letter-spacing:10rpx
		button::after  
			border none 
	.daka-sum
		position absolute
		bottom 60rpx
		left 40rpx
		z-index 200
.desc
	background #fff
.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
